@mixin width-loop() {
  @for $i from 1 through 10 {
    $list: $i*10;
    $listp: $i*10%;

    .w#{$list} {
      width: #{$list}px;
    }

    .w#{$list}rem {
      width: #{$list/100}rem;
    }

    .w#{$list}p {
      width: #{$listp}; 
    }
  }
}

@mixin margin-loop() {
  @for $i from 1 through 6 {
    $item: $i*5;

    .m#{$item} {
      margin: #{$item}px;
    }

    .mt#{$item} {
      margin-top: #{$item}px;
    }

    .mb#{$item} {
      margin-bottom: #{$item}px;
    }

    .ml#{$item} {
      margin-left: #{$item}px;
    }

    .mr#{$item} {
      margin-right: #{$item}px;
    }
  }

  .m0 {
    margin: 0 !important
  }
}

@mixin padding-loop() {
  @for $i from 1 through 6 {
    $item: $i*5;

    .p#{$item} {
      padding: #{$item}px;
    }

    .pt#{$item} {
      padding-top: #{$item}px;
    }

    .pb#{$item} {
      padding-bottom: #{$item}px;
    }

    .pl#{$item} {
      padding-left: #{$item}px;
    }

    .pr#{$item} {
      padding-right: #{$item}px;
    }
  }

  .p0 {
    padding: 0 !important
  }
}

.clearfix {
  @include clearfix();
}

.text-center {
  text-align: center;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.c000 {
  color: #000
}

.c333 {
  color: #333
}

.c666 {
  color: #666;
}

.c999 {
  color: #999;
}

.cccc {
  color: #ccc;
}

.red {
  color: red;
}

.white {
  color: white;
}

.blue {
  color: blue;
}

.yellow {
  color: yellow;
}

.green {
  color: green;
}

.f12 {
  font-size: px-or-rem(12);
}

.f13 {
  font-size: px-or-rem(13);
}

.f14 {
  font-size: px-or-rem(14);
}

.f16 {
  font-size: px-or-rem(16);
}

.f20 {
  font-size: px-or-rem(20);
}

.f24 {
  font-size:px-or-rem(24);
}

.f30 {
  font-size: px-or-rem(30);
}

.f36 {
  font-size: px-or-rem(36);
}

.f48 {
  font-size: px-or-rem(48);
}

.fb {
  font-weight: bold;
}

.fn {
  font-weight: normal;
}

@include width-loop();
@include padding-loop();
@include margin-loop();